Skip to main content

[Day 5] Loadinggg: 這30天Loading好重(?

滴..滴滴..滴滴滴，讀取完成! 今天我們來實作Day #4

我們在讀取網頁期間，常會看到不同的讀取畫面，雖然讀取有可能讓人厭煩，但看到漂亮的loading畫面，好像就輕鬆了些 ~ 那就讓我們開始吧!

CodePen: https://codepen.io/stevetanus/pen/OJZXZwW

1. HTML​

<div class="frame">
  <div class="center">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </div>
</div>

這個作品需要三個圓圈圈，.circle1、circle2、circle3。

2. SCSS(CSS)​

.center​

.frame {
  width: 400px;
  height: 400px;
  position: absolute;
  .center {
    position: absolute;
    top: 100px;
    left: 100px;
    ...}
}

我們將.center定位在.frame的(100,100)的位置。

.circle1​

.circle1 {
  position: absolute;
  top: 85px;
  left: 85px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: 3;

因為.frame的寬度為400px，在.center往右往下推100px之下，我們在.circle1往右往下推85px，加上圓圈的半徑15px，剛好固定.circle1在畫布中心。z-index: 3(z3)使.circle1成為最上面的圓圈。

.circle2, .circle3​

.circle2 {
  position: absolute;
  left: 75px;
  top: 75px;
  width: 50px;
  height: 50px;
  z-index: 2;
  ...}
.circle3 {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 60px;
  left: 60px;
  z-index: 1;
  ...}

.circle2和.circle3分別為半徑25px、半徑40px的圓圈，跟上面一樣的方法置中，z-index分別設為2跟1。 現在的圖形大概長成這樣:

https://ithelp.ithome.com.tw/upload/images/20220912/201521918zN7ZXkZbA.jpg

動畫 (box-shadow & scale)​

在此作品中，三個圓圈的動畫大致相同，在box-shadow和scale產生變化:

@keyframes jump-jump-1 {
  0%,
  70% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }

  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

@keyframes jump-jump-2 {
  0%,
  40% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }

  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

@keyframes jump-jump-3 {
  0%,
  10% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }
  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

可以看到差別在於開始動畫的時刻，.circle1為70%，.circle2為40%，.circle3為10%，因此.circle3最先scale(1)且陰影放大，再來.circle2，最後.circle3。

那要如何呈現反向的動畫呢? (animate-direction: alternate)​

我們看到圓圈套用的動畫:

.circle1 {
  animation: jump-jump-1 2s $bezier infinite alternate;
  ...}
.circle2 {
  animation: jump-jump-2 2s $bezier infinite alternate;
  ...}
.circle3 {
  animation: jump-jump-3 2s $bezier infinite alternate;
  ...}

在animation的最後都加上了alternate，這是animate-direction: alternate的縮寫，讓動畫正向跑完之後會反向進行，而infinite使得動畫會無限輪迴地進行(animation-iteration-count: infinite;)。

動畫速度​

$bezier: cubic-bezier(0.21, 0.98, 0.6, 0.99); https://cubic-bezier.com/#.21,.98,.6,.99 此動畫速度跟ease-in-out很像，中間快速變化，特別強調開始與結束的效果，配上alternate的屬性，使作品停留在滿圓圈的效果十分顯著。

打包帶走(take away)​

CSS

目標屬性
動畫方向animation-direction: alternate
圓形置中left, right (考量半徑)
動畫放大box-shadow, scale

後記​

今天是風雨交加的颱風天，就算提早了半小時出門，搭上了公車，卻還是感覺到交通比平常更為阻塞呢 ~ 下班後吃著麥當勞繼續寫文章。